<template>
	<view class="init-friend">
		<!-- 未邀请好友 -->
		<view class="one-init">
			<view class="tu">
				<image src="../../static/tu.jpg" mode="widthFix"></image>
				<view class="zi">
					暂时还没邀请好友
				</view>
			</view>
		</view>
		<!-- 已邀请到好友 -->
		<view class="two-init">
			<view class="inits">已经邀请22位好友</view>
			<view class="flex two-box" v-for="(item,index) in initData">
				<view class="img">
					<image :src="item.src" mode="widthFix"></image>
				</view>
				<view class="title">
					<h3>{{item.name}}</h3>
					<p>{{item.data}}</p>
				</view>
			</view>
		</view>
		<button @click="init()">邀请好友</button>
	
	
	
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				initData:[
					{src:'../../static/bbh.png',name:'黑山羊',data:'2020-9-1'},
					{src:'../../static/bbh.png',name:'黑山羊',data:'2020-9-1'},
					{src:'../../static/bbh.png',name:'黑山羊',data:'2020-9-1'},
					{src:'../../static/bbh.png',name:'黑山羊',data:'2020-9-1'}
				]
				
			}
		},
		onLoad() {
			
		},
		methods: {
			init:function(){
				uni.showToast({
					title:"邀请好友",
					icon:'error',
					duration: 6000,
				})	
			}
			
		}
	}
</script>

<style>
	button{width: 50%;margin: 0 auto;background-color: green;color: #fff;}
	.tu{text-align: center;color: #ccc;margin:70px 0 50px 0;}
	.tu image{display: block;width: 50%;margin: 0 auto;border: 0;}
	.zi{line-height: 50px;}
	.one-init{width: 90%;margin: 0 auto;}
	.two-init{width: 100%;margin:10px 0 30px 0;display: none;}
	.inits{text-align: center;color: #999;font-size: 14px}
	.two-box{width:90%;margin:10px auto;border-radius: 20rpx;box-shadow: 3px 5px 10px #999;padding: 10px;box-sizing: border-box;}
	.img{width: 20%;margin-right: 5px;}
	.img image{width:90%; display: block;margin: 0 auto;border-radius: 50%;}
	.flex{display: flex;flex-direction: row;align-items: center;}
	.title p{color: #999;font-size: 11px;line-height: 20px;}
	
</style>